!<template>
  <div class="login-container">
    <!-- <img alt="Vue logo" width="128" height="128" src="../../assets/cuit.png" />
    <h1>登录页面组件</h1>-->
    <div class="logo">
      <div>
        <svg
          t="1654936674237"
          class="icon"
          viewBox="0 0 1024 1024"
          version="1.1"
          xmlns="http://www.w3.org/2000/svg"
          p-id="2797"
          width="48"
          height="32"
        >
          <path
            d="M512 1024c-106.514286 0-184.457143-6.742857-231.657143-20.114286-19.885714-5.6-34.971429-12.571429-46.057143-21.142857-16.571429-12.8-21.942857-27.314286-23.657143-37.257143l-0.114285-0.8-14.057143-104.457143-7.771429-0.457142-63.657143-461.371429 9.371429 0.342857-6.057143-45.257143H76.457143L100.342857 193.142857c2.857143-16.8 12.342857-30.971429 25.485714-40l13.714286-77.942857c5.028571-28.457143 29.828571-49.028571 59.085714-49.028571h437.6C645.6 10.285714 662.285714 0 681.371429 0h142.857142C851.428571 0 873.942857 21.028571 876.571429 48.914286l0.571428 6.4c3.542857 6.057143 6.057143 12.685714 7.314286 19.771428l13.714286 77.942857c13.142857 9.028571 22.628571 23.2 25.485714 40l23.885714 140.342858h-52l-6.057143 45.257142 9.371429-0.342857-63.657143 461.371429-7.771429 0.457143-14.057142 104.457143-0.114286 0.8c-1.6 9.942857-7.085714 24.457143-23.657143 37.257142-11.085714 8.571429-26.171429 15.542857-46.057143 21.142858C696.457143 1017.257143 618.514286 1024 512 1024z"
            fill="#25467A"
            p-id="2798"
          />
          <path
            d="M512 231.314286H165.828571L260.571429 936.914286s6.057143 36.342857 251.428571 36.342857 251.428571-36.342857 251.428571-36.342857l94.742858-705.485715H512z"
            fill="#BBDEFB"
            p-id="2799"
          />
          <path
            d="M512 435.771429c-165.371429 0-328.571429-5.028571-328.571429-5.028572l49.828572 361.028572c76.685714 4.571429 169.6 7.885714 278.742857 7.885714s202.057143-3.314286 278.742857-7.885714l49.828572-361.028572s-163.2 5.028571-328.571429 5.028572z"
            fill="#1E88E5"
            p-id="2800"
          />
          <path
            d="M826.057143 54.057143c-0.114286-1.828571-1.142857-3.2-2.171429-3.2H681.142857c-1.028571 0-1.942857 1.371429-2.171428 3.2l-4.8 52.457143H830.857143l-4.8-52.457143z"
            fill="#EEEEEE"
            p-id="2801"
          />
          <path
            d="M834.514286 84.228571c-0.8-4.228571-4.8-7.428571-9.485715-7.428571H198.971429c-4.685714 0-8.8 3.085714-9.485715 7.428571l-21.257143 120.8h687.542858L834.514286 84.228571z"
            fill="#F5F5F5"
            p-id="2802"
          />
          <path
            d="M873.6 201.828571c-0.8-4.914286-4.914286-8.571429-9.6-8.571428H160c-4.685714 0-8.8 3.657143-9.6 8.571428l-13.942857 81.485715h751.085714l-13.942857-81.485715z"
            fill="#FFFFFF"
            p-id="2803"
          />
          <path
            d="M512 720.8c-35.314286 0-64-28.685714-64-64 0-7.085714 5.714286-12.8 12.8-12.8s12.8 5.714286 12.8 12.8c0 21.257143 17.257143 38.4 38.4 38.4s38.4-17.142857 38.4-38.4c0-7.085714 5.714286-12.8 12.8-12.8s12.8 5.714286 12.8 12.8c0 35.428571-28.685714 64-64 64z"
            fill="#25467A"
            p-id="2804"
          />
          <path
            d="M384 554.4m-38.4 0a38.4 38.4 0 1 0 76.8 0 38.4 38.4 0 1 0-76.8 0Z"
            fill="#25467A"
            p-id="2805"
          />
          <path
            d="M640 554.4m-38.4 0a38.4 38.4 0 1 0 76.8 0 38.4 38.4 0 1 0-76.8 0Z"
            fill="#25467A"
            p-id="2806"
          />
          <path
            d="M332.8 618.4h-51.2c-14.171429 0-25.6 11.428571-25.6 25.6s11.428571 25.6 25.6 25.6h51.2c14.171429 0 25.6-11.428571 25.6-25.6 0-14.057143-11.428571-25.485714-25.6-25.6zM742.4 618.4h-51.2c-14.171429 0-25.6 11.428571-25.6 25.6s11.428571 25.6 25.6 25.6h51.2c14.171429 0 25.6-11.428571 25.6-25.6 0-14.057143-11.428571-25.485714-25.6-25.6z"
            fill="#BBDEFB"
            p-id="2807"
          />
        </svg>
      </div>
      <div class="logo-text">便利店管理系统</div>
    </div>

    <a-row class="left-banner">
      <a-col :span="10">
        <div class="left-background">
          <div class="left-wrapper">
            <div class="left-container-title">一种选择，万般心意</div>
            <div class="left-container-subtitle">省钱省心好生活</div>
            <div class="left-container-subtitle">springboot + vue&vite 前后端分离高效运行，现代化UI丝滑体验</div>
            <img
              class="carousel-image"
              src="https://pic.imgdb.cn/item/62a54bcc0947543129a3a76a.png"
            />
          </div>
        </div>
      </a-col>
      <a-col :span="14">
        <div class="login-content">
          <div class="login-content-inner">
            <div class="login-content-wrapper">
              <div class="login-form-title">登录</div>
              <div class="login-form-sub-title">使用您的内部账号登录管理系统</div>
              <div class="login-form-error-msg">{{errormsg}}</div>
              <a-form
                :model="loginForm"
                name="loginForm"
                :label-col="{ span: 0 }"
                :wrapper-col="{ span: 24 }"
                autocomplete="off"
                @finish="submitSuccess"
                @finishFailed="submitFailed"
              >
                <a-form-item label name="userId" :rules="[{ required: true, message: '用户名不能为空' }]">
                  <a-input v-model:value="loginForm.userId" placeholder="账号">
                    <template #prefix>
                      <user-outlined type="user" />
                    </template>
                  </a-input>
                </a-form-item>

                <a-form-item label name="password" :rules="[{ required: true, message: '密码不能为空' }]">
                  <a-input-password v-model:value="loginForm.password" placeholder="密码">
                    <template #prefix>
                      <lock-outlined />
                    </template>
                  </a-input-password>
                </a-form-item>

                <a-form-item
                  name="remember"
                  style="margin-left:1px"
                  :wrapper-col="{ offset: 0, span: 16 }"
                >
                  <a-checkbox v-model:checked="loginForm.remember">记住密码</a-checkbox>
                </a-form-item>

                <a-form-item :wrapper-col="{ offset: 0, span: 24 }">
                  <a-button
                    style="margin-bottom:15px;"
                    block
                    type="primary"
                    html-type="submit"
                    :loading="loginng"
                  >登录</a-button>
                  <!-- <a-button block type="text">注册账号</a-button> -->
                </a-form-item>
              </a-form>
            </div>
          </div>
          <div class="footer">{{ copyRights }}</div>
        </div>
      </a-col>
    </a-row>
  </div>
</template>

<script>
import { reactive, ref } from "vue";
import {
  UserOutlined,
  InfoCircleOutlined,
  LockOutlined
} from "@ant-design/icons-vue";
import { message } from "ant-design-vue";
import { login } from "@/api/login";
import { sha256 } from "js-sha256";
import { setCookie, getCookie } from "@/utils/cookie";
export default {
  name: "Login",
  components: {
    UserOutlined,
    InfoCircleOutlined,
    LockOutlined
  },
  setup() {
    const loginForm = reactive({
      userId: "",
      password: "",
      remember: null
    });
    return {
      loginForm
    };
  },
  data() {
    return {
      loginng: ref(false),
      errormsg: "",
      copyRights: "powered by 软工195 zy"
    };
  },

  mounted() {
    this.init();
  },

  methods: {
    init() {
      this.loginForm.userId = getCookie("userId") ? getCookie("userId") : "";
      this.loginForm.password = getCookie("password")
        ? getCookie("password")
        : "";
      this.loginForm.remember =
        getCookie("remember") !== null ? Boolean(getCookie("remember")) : true;
    },
    async sendLoginForm() {
      //在函数内部需要使用替代指针that，否则会报错
      let that = this;
      this.loginng = true;
      that.errormsg = "";
      setCookie("userId", this.loginForm.userId, 7);
      if (that.loginForm.remember) {
        setCookie("password", this.loginForm.password, 7);
      }
      setCookie("remember", this.loginForm.remember ? 1 : "", 7);
      setTimeout(() => {
        const res = login({
          userId: this.loginForm.userId,
          password: sha256(this.loginForm.password)
        });
        res
          .then(response => {
            //这里是请求成功后的操作
            that.loginng = false;
            if (response.code === 100) {
              const user = {
                userId: response.data.info.userId,
                userName: response.data.info.userName,
                role: response.data.role,
                roleName:response.data.info.roleName,
                permission:response.data.info.permission
              };
              window.sessionStorage.setItem(
                "access_token",
                response.data.token
              );
              window.sessionStorage.setItem("login_user", JSON.stringify(user));
              window.sessionStorage.setItem(
                "user_permission",
                response.data.info.permission
              );
              message.success("登陆成功");
              that.$router.push("/index");
            } else {
              that.errormsg = response.msg;
              message.warning(response.msg);
            }
          })
          .catch(error => {
            that.loginng = false;
            message.error(
              error.code === "ECONNABORTED"
                ? "请求超时"
                : "请求错误，请重新尝试"
            );
            //这里是请求失败后的操作
            console.log(error);
          });
      }, 500);
    },
    submitSuccess(values) {
      this.sendLoginForm();
    },
    submitFailed(errorInfo) {
      console.log(errorInfo);
      message.warning("账号或密码错误");
      this.errormsg = "账号或密码错误";
    },
    onChange() {}
  }
};
</script>

<style lnag="less" scoped>
.login-form-password-actions {
  display: flex;
  justify-content: space-between;
}
.left-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
}
.left-container-title {
  font-weight: 500;
  font-size: 22px;
  line-height: 32px;
  color: rgb(248, 248, 248);
}

.left-container-subtitle {
  margin-top: 8px;
  color: #aeb2b6;
  font-size: 14px;
  line-height: 22px;
}
.login-form-input {
  margin-bottom: 20px;
}
.login-form-error-msg {
  height: 32px;
  color: rgb(247, 105, 101);
  line-height: 32px;
}
.login-content-inner {
  text-align: left;
}
.login-content-wrapper {
  width: 320px;
}
.login-form-sub-title {
  user-select: none;
  font-size: 16px;
  line-height: 24px;
  color: rgb(122, 122, 122);
}
.login-form-title {
  user-select: none;
  font-weight: 500;
  font-size: 24px;
  line-height: 32px;
  color: rgb(29, 33, 41);
}
.footer {
  font-weight: 500;
  position: absolute;
  bottom: 0;
  width: 100%;
  right: 0;
  margin-bottom: 1rem;
}
.login-content {
  position: relative;
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: center;
  padding-bottom: 40px;
  width: 100%;
  height: 100%;
}
.logo {
  position: fixed;
  top: 24px;
  left: 22px;
  z-index: 1;
  display: inline-flex;
  align-items: center;
}

.carousel-image {
  width: 320px;
  user-select: none;
  -webkit-user-drag: none;
}

.left-background {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  width: 100%;
  background: linear-gradient(135deg, #030835, #004e92, #185081);
}
.logo-text {
  user-select: none;
  margin-right: 4px;
  margin-left: 4px;
  color: rgb(247, 248, 250);
  font-size: 24px;
  letter-spacing: 4px;
}

.login-container {
  height: 100%;
  width: 100%;
  position: relative;
}
.left-banner {
  height: 100%;
}
</style>